<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<title>论坛</title>
<head>
  <meta charset="UTF-8">
  <style>

    #yc{
      width: 500px;
      height: 100px;
      padding:40px;
      margin:0 auto;
      background-color:#ccc;
      background-color: rgba(254,219,207,0.5);
      border-radius: 15px 15px 15px 15px;


    }
    input{
      margin-left: 50px;
    }
    #tiezi{
      margin-bottom:10px;
      height: auto;
      padding: 50px;
      background-color:#ccc;
      background-color: rgba(254,219,207,0.5);
      border-radius: 15px 15px 15px 15px;
      resize: vertical;
      /*文字自动换行*/
      word-wrap: break-word;
      word-break: normal;
    }
    #submit{
      width: 50px;
    }
    body{
      background: url(/static/背景图.jpg);
      background-repeat:no-repeat;
      background-size: 100% 100%;
      background-attachment: fixed;
    }
    .page{
      margin-left: 400px;
      border-radius: 7px;
      width: 71px;
    }
    #current_user{
      width:180px;
      height:100px;
      float:right;
    }
    #child_remark {
      margin-left:10px;
      margin-top: 20px;
    }
    /*回复按钮样式*/
    .reply{
      float:right;
      /*text-decoration:none*/
    }
    /*评论框样式*/
    .Remark{
      line-height: 40px;
      margin-left: 55px;
      /*文字自动换行*/
      word-wrap: break-word;
      word-break: normal;
    }
    /*.PublishTime {*/
    /*    float: right;*/
    /*    margin-left: 200px;*/
    /*}*/
    /*二级菜单样式 display设置为none 隐藏*/
    #current_user ul li {
      display: none;
      /*position: absolute;*/
      margin-top:10px;
      /*去除下划线*/
      text-decoration: none;
    }
    #current_user ul li a{
      /*去除下划线*/
      text-decoration: none;
    }
    /*当鼠标移动到时显示二级菜单*/
    #current_user:hover li {
      display: block;
      color: pink;
    }
    /*头像框样式*/
    .circleImg{
      border-radius: 100px;
      width:60px;
      height:60px;
      float: right;
    }
    /*评论时间样式*/
    .PublishTime{
      color: #808080;
      font-size: 12px;
      min-height: 1.6em;
    }
    .StarColor {
      float:right;
      color: lightcoral;
    }
    /*提示框样式*/
    .alert {
      display: none;
      position: fixed;
      top: 0%;
      left: 45%;
      min-width: 200px;
      margin-left: -100px;
      z-index: 99999;
      padding: 15px;
      border: 1px solid transparent;
      border-radius: 4px;
    }
    /*操作成功提示框样式*/
    .alert-success {
      color: #3c763d;
      background-color: #dff0d8;
      border-color: #d6e9c6;
    }
  </style>
</head>
<body>
<div id='sent'>
  <img class="circleImg" th:src="${headshotPath}"  />
  <!--当前用户显示 及当前用户操作二级菜单列表    -->
  <ul id="current_user">
    <a class="currentUser" th:text="'当前登录用户为：'+${current_user}"></a>
    <ul>
      <li><a onclick="Sign()">签到</a></li>
      <li><a href="http://localhost:8071/templates/test.html">更换头像</a></li>
      <li><a href="http://localhost:8071/quit">注销用户</a></li>

    </ul>
  </ul>
</div>
<HR style="FILTER:alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>

<div id="tiezi" th:each="tiezi : ${tiezi_list}" >
  <a>用户名:</a><a th:text="*{tiezi.user}"></a>
  <a th:text="'发布时间:'+*{tiezi.PublishTime}"} style="margin-left: 50px;float: right"></a>
  <br /><br />
  <!-- 帖子内容-->
  <div id="content" th:text="*{tiezi.content}"></div>
  <!--  点赞功能  根据点赞状态tiezi.starStatu设置字体颜色-->
  <a class="reply"  th:onclick="'Star('+*{tiezi.ID}+');'" th:text="'点赞数:'+*{tiezi.starNum}" th:class="*{tiezi.starStatu}?'StarColor':'reply'"></a><br>
  <!--拼接调用js函数，将帖子ID传到js函数中进行帖子的显示与隐藏处理    -->
  <a class="reply"  th:onclick="'showAndhide('+*{tiezi.ID}+');'">评论</a>
  <br /><br />
  <HR style="FILTER:alpha(opacity=100,finishopacity=0,style=3)" width="80%"color=#987cb9 SIZE=3>
  <div th:each="Remark : ${remark_list} " >
    <div class="Remark">
      <!--根评论输出        -->
      <!--th:if="*{tiezi.ID eq Remark.ParentID}" 设置条件:当帖子ID和评论对应时进行输出        -->
      <a  th:if="*{tiezi.ID eq Remark.ParentID}" th:text="'用户'+*{Remark.User}+'回复'+*{tiezi.user}+'的评论：'+*{Remark.Text}"></a>
      <a th:if="*{tiezi.ID eq Remark.ParentID}" th:text="*{'发布时间:'+Remark.PublishTime}" class="PublishTime"></a>
      <!--拼接调用js函数，将帖子ID传到js函数中进行帖子的显示与隐藏处理    -->
      <a class="reply" th:onclick="'showAndhide('+*{Remark.ID}+');'" th:if="*{tiezi.ID eq Remark.ParentID}">回复</a>
    </div>

    <!--初次调用子评论递归块   row传入三个参数依次为父帖用户名、父帖孩子列表、左边距宽度 -->
    <tbody th:if="*{tiezi.ID eq Remark.ParentID}" th:include="this::row(*{Remark.User},*{Remark.child_List},55)" />
    <!--递归调用子评论递归块    row接收三个参数依次为父帖用户名、父帖孩子列表、左边距宽度 -->
    <th:block th:fragment="row(parentUser,child_List,marginleft)">
      <div th:each="child : ${child_List}">
        <div class="child_remark">
          <a id="child_remark" class="Remark" th:text="'用户'+*{child.User}+'回复'+${parentUser}+'的评论：'+*{child.Text}" th:style="'margin-left:'+${marginleft+50}+'px'"></a>
          <a th:text="*{'发布时间:'+child.PublishTime}" class="PublishTime"></a>
          <!--   通过点击调用showAndhide显示输入框并且将ID传到后台js中     -->
          <a class="reply"  th:onclick="'showAndhide('+*{child.ID}+');'">回复</a><br>
        </div>
        <!--  开始递归调用      -->
        <th:block th:unless="*{#lists.isEmpty(child.Child_List)}" th:include="this::row(${child.User},${child.Child_List},${marginleft+50})"/>
      </div>
    </th:block>
  </div>
  <HR>
</div>

<input type="button" id="top_page" class="page" value="上一页" onclick="top_page();">
<input type="button" id="next_page" class="page" value="下一页" onclick="next_page();">
<script src="/static/jquery-3.1.1.min.js"></script>
<script src="/templates/luntan.js"></script>
<script src="/templates/loginManage.js"></script>
</body>
</html>